<script setup>
const props = defineProps({
  headerTabs:{
    type:Number,
    default:0
  },
})
import  standarGradeHeader from '@/pages/platform/components/standarGradeHeader.vue'
/** 本页面按照功能划分功能和函数;*/
import {useApi} from "@/composables/useApi.js";
import {ref} from "vue";
import {columnarIndex, distributionIndex, standardGradesTotal, standardRadar} from "@/api/studentGrades.js";
const required = (value, name) => !!value || `${name}为必填字段`;
const router = useRouter()



/** 标化成绩检索更新表格/图标开始*/
const standardForm = ref({
  examcourse_id:'',
  grade_id:''
})
/** 场次列表*/
const sessionList = ref([])
// 校验

const getSessionList = async () => {
  const {data} = await useApi('/teacher/Api.Examcourse/index').post({page: 1, limit: 99999, type: 1})
  sessionList.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.examcourse_id
    }
  })
  standardForm.value.examcourse_id = sessionList.value[0].examcourse_id
  await getList()
  await getGradeList()
  await getStandardGradesTotal()
  getStandardChartData()
  getStandardRadar()
  getStandardPie()

}
getSessionList()
// 获取年级列表开始
const gradeList = ref([])
const getGradeList = async () => {
  const {data} = await useApi('/teacher/Api.Grade/indexList').post({})
  if (data.value.status == 200) {
    gradeList.value = data.value.data
    if(gradeList.value.length!=0){
      standardForm.value.grade_id = data.value.data[0].grade_id
      await getClassList()
    }
  }
}
// 获取年级列表结束
/** 标化成绩检索更新表格/图标结束*/

/** 渲染班级成绩柱状图开始*/
const classGradesTipsList = [
  {title: '总分',color:'#c8afff'},
  {title: '英语',color:'#6ecefe'},
  {title: '数学',color:'#9edb71'},
  {title: '语文',color:'#fed060'},
]
const  scoresBarType = ref(1)
const scoresChange =(args)=>{
  getStandardChartData()
}
const scoresRadarChange = ()=>{
  getStandardRadar()
}
const subjectChange = ()=>{
  getStandardPie()
}
const  scoresRadarType = ref(1)
const scoresTypeList = ref([
  {
    type: 1,
    title: '最高分',
  }, {
    type: 2,
    title: '中位数',
  }, {
    type: 3,
    title: '平均分',
  }])
// 科目列表
const subjectList = ref([
  {
    type: 1,
    title: '总分',
  }, {
    type: 2,
    title: '语文',
  }, {
    type: 3,
    title: '数学',
  },{
    type: 4,
    title: '英语',
  }
])
const subject = ref(1)
/** 渲染班级成绩柱状图结束*/
/** 获取班级列表开始*/
const class_id = ref([])
const classList = ref([])
const getClassList = async () => {
  const {data} = await useApi('/teacher/Api.GradeClass/indexList').post({grade_id: standardForm.value.grade_id})
  if (data.value.status == 200) {
    classList.value = data.value.data
      class_id.value = data.value.data.length != 0 ?[data.value.data[0].class_id] : []
  }
}
/** 获取班级列表结束*/

/** 表格开始*/
const selectedItems = ref([]);
const total = ref(0)
const list = ref([])
let queryFrom = ref({page: 1, limit: 20, student_id: '', student_name: '', grade_id: '', class_id: '', examcourse_id: ''})
const headers = [
  {
    title: "学生姓名",
    key: "real_name",
    width:"240px",
    align: 'start',
  },
  {
    title: "学生ID",
    width:"240px",
    align: 'start',
    key: "student_id",
  },
  {
    title: "年级",
    width:"240px",
    align: 'start',
    key: "gradeTitle",
  },
  {
    title: "班级",
    width:"240px",
    align: 'start',
    key: "classTitle",
  },
  {
    title: "考试时间",
    width:"240px",
    align: 'start',
    key: "examinationTime",
  },
  {
    title: "语文分数",
    width:"240px",
    align: 'start',
    key: "languageScore",
  },
  {
    title: "数学分数",
    width:"240px",
    align: 'start',
    key: "mathsScore",
  },
  {
    title: "英语分数",
    width:"240px",
    align: 'start',
    key: "englishScore",
  },
  {
    title: "总分",
    width:"240px",
    align: 'start',
    key: "totalScore",
  },
  {
    title: "操作",
    align: 'end',
    key: "options",
    sortable: false,
  },
]
const getList = async () => {
  const {data} = await useApi('/teacher/Api.Standardization/studentIndex').post({...queryFrom.value,...standardForm.value})
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.standardization_id
    }
  })
}
const onChangePage = (val) => {
  queryFrom.value.page = val.page
  queryFrom.value.limit = val.limit
  getList()
}
// 头部表单回调
const onChange = val => {
  let data = JSON.parse(JSON.stringify(val))
  queryFrom.value = {...queryFrom.value, ...data}
  getList()
}

/** 表格结束 */

/**
 * 获取标化成绩顶部总数量开始
 */
const standardGrades = ref({})
const standardBarList = ref({})
const getStandardGradesTotal = () => {
  standardGradesTotal(standardForm.value).then(res=>{
    standardGrades.value = res.data
  })

}

/**
 * 获取标化成绩顶部总数量结束
 * */
/** 获取柱状图数据开始*/
const getStandardChartData = () => {
  columnarIndex({...standardForm.value,type:scoresBarType.value}).then(res=>{
    standardBarList.value  = res.data
  })

}
/** 获取柱状图数据结束*/
/** 获取标化雷达图开始*/
const standardRadarList = ref([])
const getStandardRadar = () => {
  standardRadar({...standardForm.value,type:scoresRadarType.value,class_id:class_id.value}).then(res=>{
    standardRadarList.value = res.data
  })
}
/** 获取标化雷达图结束*/
/** 获取标化饼图开始*/
const standardPieList = ref([])
const getStandardPie= () => {
  distributionIndex({...standardForm.value,type:subject.value}).then(res=>{
    standardPieList.value = res.data
  })
}
/** 获取标化饼图结束*/
/** 初始化开始*/
const changeSession =()=>{
  getStandardPie()
  getStandardRadar()
  getStandardChartData()
  getList()
  getStandardGradesTotal()
}
/** 初始化结束*/
/** 查看学生详情*/
const viewDetail = item => {
  router.push(`/archives/standardStudentDetail?id=${item.student_id}`)
}
</script>

<template>
  <!--      标化成绩-->
  <div>
    <!--      搜索栏-->
    <div   class="search-box">
      <VRow>
        <div class="w-200 mr-3 ml-3">
          <VSelect
            style="width: 200px;height: 38px;"
            v-model="standardForm.examcourse_id"
            :items="sessionList"
            @update:modelValue="changeSession"
            item-title="title"
            item-value="examcourse_id"
            placeholder="请选择所属场次"
            label="所属场次*"
            class="input-width-height"
          />
        </div>
        <div class="w-200">
          <VSelect
            style="width: 200px;"
            v-model="standardForm.grade_id"
            @update:modelValue="changeSession"
            :items="gradeList"
            item-title="title"
            item-value="grade_id"
            placeholder="请选择所属年级"
            label="所属年级*"
            class="input-width-height"
          />

        </div>
        <div class="flex right-box right-summary" >
          <div class="icon-box ">
            <i class="ri-user-3-line" style="font-size: 20px;"></i>
          </div>
          <div class="">
            年级参考总人数：{{standardGrades.gradeSonNum}}
          </div>
        </div>
      </VRow>
    </div>
    <!--      展示总览-->
    <div  class="text-display">
      <div class="text-display-item">
        <div>
          <div class="title">
            年级英语最高分
          </div>
          <div>
            {{standardGrades.english?.max||0}}
          </div>
        </div>
        <div>
          <div class="title">
            英语平均分
          </div>
          <div>
            {{standardGrades.english?.avg||0}}
          </div>
        </div>
        <div>
          <div class="title">
            英语中位数
          </div>
          <div>
            {{standardGrades.english?.median ||0}}
          </div>
        </div>
        <div class="icon-box">
          <i class="ri-english-input" ></i>
        </div>
      </div>
      <div class=" text-display-item">
        <div>
          <div class="title">
            年级数学最高分
          </div>
          <div>
            {{standardGrades.maths?.max ||0}}
          </div>
        </div>
        <div>
          <div class="title">
            数学平均分
          </div>
          <div>
            {{standardGrades.maths?.avg ||0}}
          </div>
        </div>
        <div>
          <div class="title">
            数学中位数
          </div>
          <div>
            {{standardGrades.maths?.median ||0}}
          </div>
        </div>
        <div class="icon-box" style="background-color: rgba(228, 247, 214, 1)">
          <i class="ri-superscript" style="color:rgba(86, 202, 0, 1)"></i>
        </div>
      </div>
      <div class=" text-display-item">
        <div>
          <div class="title">
            年级语文最高分
          </div>
          <div>
            {{standardGrades.maths?.max ||0}}
          </div>
        </div>
        <div>
          <div class="title">
            语文平均分
          </div>
          <div>
            {{standardGrades.maths?.avg ||0}}
          </div>
        </div>
        <div>
          <div class="title">
            语文中位数
          </div>
          <div>
            {{standardGrades.maths?.median||0}}
          </div>
        </div>
        <div class="icon-box" style="background-color:rgba(255, 243, 214, 1)">
          <i class="ri-emphasis-cn" style="color:rgba(255, 180, 0, 1);"></i>
        </div>
      </div>
    </div>
    <!--      班级柱状图-->
    <div class="mt-5 class-bar-box">
      <div class="flex-box chart-line">
        <div class="title">班级成绩柱状图</div>
        <div class="flex-box tip-item" v-for="(item,index) in classGradesTipsList" :key="index" >
          <div class="color-box" :style="{backgroundColor:item.color}"></div>
          <div class="name">
            {{item.title}}
          </div>
        </div>
        <div class="ml-auto">
          <el-select
            class="ml-6"
            v-model="scoresBarType"
            @change="scoresChange"
            popper-class="mySelectStyle"
            style="width: 120px;"
          >
            <el-option
              v-for="item in scoresTypeList"
              :key="item.type"
              :label="item.title"
              :value="item.type"
            />
          </el-select>
        </div>
      </div>
      <bar-chart :data-list="standardBarList"></bar-chart>
    </div>
    <!--      雷达图 分数分布    -->
    <div class="mt-5 flex-box">
      <div class="radar-box box-shadow">
        <div class="flex-box chart-line">
          <div class="title">雷达图</div>
          <div class="ml-auto">
            <el-select
              class="ml-6"
              v-model="scoresRadarType"
              @change="scoresRadarChange"
              popper-class="mySelectStyle"
              style="width: 120px;"
            >
              <el-option
                v-for="item in scoresTypeList"
                :key="item.type"
                :label="item.title"
                :value="item.type"
              />
            </el-select>

          </div>
          <div >
            <el-select
              class="ml-6"
              v-model="class_id"
              @change="scoresRadarChange"
              multiple
              collapse-tags
              popper-class="mySelectStyle"
              style="width: 160px;"
            >
              <el-option
                v-for="item in classList"
                :key="item.class_id"
                :label="item.title"
                :value="item.class_id"
              />
            </el-select>
          </div>

        </div>
        <radar-chart v-if="standardRadarList.length!=0" height="430px" :data-list="standardRadarList"></radar-chart>
      </div>
      <div class="radar-box box-shadow" style="margin-left: 4%">
        <div class="flex-box chart-line ">
          <div>
            <div class="title">分数分布</div>
            <div class="tip">所在分布区间内人数占的比例</div>
          </div>
          <div class="ml-auto">
            <el-select
              class="ml-2"
              v-model="subject"
              @change="subjectChange"

              popper-class="mySelectStyle"
              style="width: 120px;"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.type"
                :label="item.title"
                :value="item.type"
              />
            </el-select>
          </div>
        </div>
        <pie-chart  :data-list="standardPieList" height="420px"></pie-chart>
      </div>
    </div>
    <!--          底部 table-->
    <div class="mt-10">
      <standar-grade-header title="学生列表"
                            :display-flag="true"
                            @onChange="onChange"
      />
      <VDataTable
        v-model="selectedItems"
        :headers="headers"
        :items="list"
      :items-per-page="100"
        item-key="id"
        show-select
        class="text-no-wrap"
      >
        <template #item.options="{ item }">
          <div class="d-flex align-center options-right-display">
            <div class="flex-column cursor-pointer">
              <i @click="viewDetail(item)" class="ri-menu-line"></i>
            </div>
          </div>
        </template>
      </VDataTable>
      <pagination-vue
        @onChange="onChangePage"
        :current-page="queryFrom.page"
        :page-size="queryFrom.limit"
        :total="total"
      />
    </div>
  </div>
</template>



<style scoped lang="scss">
.box-shadow{
  border-radius:  6px;
  box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
  padding: 24px;
}
.header-box{
  background-color:rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;
  .title{
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

  }
  .tabs{
    margin-left: 30px;
    display: flex;
    align-items: center;
    .active{

      background-color:rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }
    .item{
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height:38px;
      margin-right: 4px;
      cursor: pointer;
      >i{
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}
.main-bottom{
  background-color: rgb(var(--v-theme-surface));
  padding:32px 24px 30px;
  .right-summary{
    display: flex;
    align-items: center;
    margin-left: auto;
    font-family: Inter;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .icon-box{
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:rgba(240, 239, 240, 1);
      border-radius: 6px;
      margin-right: 10px;
    }
  }
  .search-box{
    background-color: rgb(var(--v-theme-surface));
  }
  .text-display{
    display:flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .text-display-item{
      margin-top:10px;
      width: 32%;
      display:flex;
      justify-content: space-between;
      box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
      padding: 20px;
      border-radius: 6px;
      .icon-box{
        width: 42px;
        height: 42px;
        padding: 8px;
        border-radius: 6px;
        background: rgba(218, 243, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(22, 177, 255, 1);
      }
      .title{
        font-family: PingFang SC;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-bottom:10px;
      }

    }
  }
  .class-bar-box{
    box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
    padding: 20px;
    border-radius: 6px;


  }
  .radar-box{
    width: 48%;
    height: 500px;
  }
}
.chart-line{
  height: 30px;
  .title{
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right:15px;
  }
  .tip{
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(46, 38, 61, 0.55);
  }
  .tip-item{
    display: flex;
    align-items: center;
    margin-left: 30px;
    .color-box{
      width: 16px;
      height: 16px;
      border-radius: 1px;
      margin-right: 8px;
    }
  }
}
</style>
